<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import StudentCourse from './components/StudentCourse.vue'
import type { StudentInfoItem, StudentInfoParams } from '@/types/studentInfo'
import { getStudentInfoList, addStudyRecord, batchSignIn } from '@/services/studentInfo.ts'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import UniFab from '@dcloudio/uni-ui/lib/uni-fab/uni-fab.vue'
import { useMemberStore } from '@/stores'
import { config } from '@/global'

const studentInfoList = ref<StudentInfoItem[]>([])
const hasMoreInfo = ref(true)
// 是否加载中标记
const isLoading = ref(false)
const studentInfoParams = ref<StudentInfoParams>({ pageNum: 1, pageSize: 10 })
// 获取消息列表
const getStudentInfoListData = async (pageParams: StudentInfoParams) => {
  // 如果是下拉刷新，清空现有数据
  if (pageParams.pageNum === 1) {
    studentInfoList.value = []
    hasMoreInfo.value = true
  }

  // 如果没有更多数据，直接返回
  if (!hasMoreInfo.value) {
    return
  }

  try {
    const res = await getStudentInfoList(pageParams)
    // 添加数据
    if (pageParams.pageNum === 1) {
      studentInfoList.value = res.data
    } else {
      studentInfoList.value = [...studentInfoList.value, ...res.data]
    }
    // 判断是否还有更多数据
    hasMoreInfo.value = res.data.length === pageParams.pageSize
    // 更新页码
    studentInfoParams.value.pageNum = pageParams.pageNum
  } catch (error) {
    console.error('获取学生列表失败:', error)
  }
}

// 加载数据
const loadData = async () => {
  isLoading.value = true
  await getStudentInfoListData(studentInfoParams.value) // 重置为第一页
  isLoading.value = false
}

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  studentInfoParams.value.pageNum = 1
  studentInfoParams.value.pageSize = 10
  await getStudentInfoListData(studentInfoParams.value)
  isTriggered.value = false
}
// 上拉加载更多
const handleLoadMore = () => {
  if (hasMoreInfo.value) {
    studentInfoParams.value.pageNum = (studentInfoParams.value.pageNum ?? 1) + 1
    getStudentInfoListData(studentInfoParams.value)
  }
}

onLoad(() => {
  // 首次加载数据
  loadData()
})
// 添加弹窗控制变量
const popupTitle = ref('记录上课信息')
const studyStatus = ref(1)
const scheduleId = ref(1)
const recordPopup = ref<InstanceType<typeof UniPopup> | null>(null)
const selectImageList = ref<string[]>([])
// 表单数据
const formData = ref({
  classTime: new Date().toISOString().split('T')[0] + ' ' + new Date().toTimeString().slice(0, 8),
  comment: '',
  score: 5,
  activityScore: 5,
  participationScore: 5,
  images: [] as string[], // 新增图片数组
})
</script>

<template>
  <!-- 页面头部 -->
  <!-- <view class="page-header">
    <text class="header-title">学生管理</text>
  </view> -->
  <!-- 滚动容器 -->
  <scroll-view
    :enable-back-to-top="true"
    :refresher-enabled="true"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="handleLoadMore"
    class="message-list"
    :scroll-y="true"
  >
    <StudentCourse v-for="student in studentInfoList" :key="student.id" :studentInfo="student" />
    <!-- 空状态显示 -->
    <view class="empty-state" v-if="studentInfoList.length === 0 && !isLoading">
      <image class="empty-icon" src="@/static/images/empty.png" mode="aspectFit"></image>
      <text class="empty-text">暂无相关学生数据</text>
      <button class="empty-button" @click="onRefresherrefresh">刷新</button>
    </view>
    <!-- 加载中状态 -->
  </scroll-view>
</template>

<style scoped lang="scss">
/* 滚动容器样式 */
.message-list {
  padding: 20rpx 0;
  background-color: $student-bg-color;
  min-height: calc(100vh - 100rpx);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: $student-text-tertiary;
  margin-bottom: 30rpx;
}

.empty-button {
  background-color: $student-primary-color;
  color: white;
  border-radius: 44rpx;
  padding: 0 60rpx;
  font-size: 28rpx;
}

/* 加载中状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: $student-text-tertiary;
  margin-top: 16rpx;
}

/* 弹窗样式 */
.record-popup {
  display: flex;
  align-items: flex-end;
}

.popup-content {
  width: 100% !important;
  max-width: 700rpx;
  margin: 0 auto;
  padding: 30rpx;
  background-color: $student-card-bg;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid $student-border-color;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $student-text-primary;
}

.textarea-input {
  min-height: 160rpx;
  border: 1rpx solid $student-border-color;
  border-radius: 8rpx;
  padding: 20rpx;
}

.file-picker {
  margin-top: 10rpx;
}

.popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 40rpx;
}

.popup-footer button {
  border-radius: 44rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  height: 88rpx;
  line-height: 88rpx;
}

/* 按钮样式优化 */
.popup-footer button:first-child {
  background-color: #f5f7fa;
  color: $student-text-secondary;
}

/* 评分组件样式 */
.uni-rate {
  margin-top: 8rpx;
}

/* 批量签弹窗样式 */
.batch-popup {
  display: flex;
  align-items: center;
  justify-content: center;
}

.batch-popup-content {
  width: 90%;
  max-width: 600rpx;
  background-color: $student-card-bg;
  border-radius: 20rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
}

.batch-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid $student-border-color;
}

.batch-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $student-text-primary;
}

.batch-popup-body {
  max-height: 500rpx;
  overflow-y: auto;
}

.select-all-btn {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid $student-border-color;
}

.select-all-btn text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: $student-text-primary;
}

.selected-count {
  margin-left: auto;
  font-size: 26rpx;
  color: $student-text-secondary;
}

.student-list {
  max-height: 400rpx;
}

.student-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid $student-border-color;
}

.checkbox {
  margin-right: 20rpx;
}

.student-info {
  flex: 1;
}

.student-name {
  font-size: 28rpx;
  color: $student-text-primary;
}

.student-id {
  font-size: 24rpx;
  color: $student-text-secondary;
}

.batch-popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 30rpx;
}

.batch-popup-footer button {
  border-radius: 44rpx;
  padding: 0 40rpx;
  font-size: 28rpx;
  height: 88rpx;
  line-height: 88rpx;
}

/* 悬浮按钮样式 */
.uni-fab {
  --fab-bg-color: $student-primary-color;
  --fab-menu-bg-color: $student-primary-color;
}
</style>
